<template>
  <div v-loading="loading">
    <!-- 搜索部分 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="12">
        <el-col :span="4">
          <el-form-item label="桌号">
            <el-input
              type="number"
              v-model="searchData.num"
              placeholder="桌号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点单人">
            <el-input
              v-model="searchData.people"
              placeholder="点单人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="时间">
            <el-date-picker
              v-model="searchData.time"
              format="YYYY-MM-DD"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="12">
        <el-table
          :data="tableData.list"
          border
          style="width: 100%; height: 665px"
          line-height="50px"
        >
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="num" label="桌号"> </el-table-column>
          <el-table-column prop="people" label="点单人"> </el-table-column>
          <el-table-column prop="totalPrice" label="消费金额">
          </el-table-column>
          <el-table-column label="时间">
            <template #default="scoped">
              <span>{{ parseTime(scoped.row.create_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scoped">
              <el-button
                type="primary"
                size="small"
                @click="handlDetail(scoped.row)"
              >
                消费详情
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteClick(scoped.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18"> </el-col>
        <el-col :span="6">
          <el-pagination
            :page-size="searchData.pageSize"
            :size="searchData.pageNum"
            :background="false"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 详情 -->
    <el-dialog title="消费详情" v-model="dialogCheckout">
      <el-row :gutter="24">
        <el-col :span="7" v-for="item in historyLis" :key="item.id">
          <div class="grid-content ep-bg-purple">
            <div :style="{ color: item.isNew == 1 ? 'blue' : '' }">
              {{ item.skuName }}:
            </div>
            <div>
              &nbsp &nbsp x
              <span style="color: red">{{ item.num }}</span>
            </div>
            <div style="margin-left: 20px">￥{{ item.num * item.price }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="15"></el-col>
        <el-col :span="8"
          ><div style="font-size: 20px">
            消费金额:￥{{ totalPrice }}
          </div></el-col
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckout = false">取 消</el-button>
        <el-button type="primary" @click="dialogCheckout = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="SkuOrderNumber">
import { ref, reactive, onMounted, nextTick } from 'vue'
import {
  listtable,
  addtable,
  getList,
  orderOver,
  deleteItem,
} from '@/api/sku/sku.js'
import { ElMessageBox, ElMessage } from 'element-plus'
onMounted(() => {
  geTableList()
})
const searchData = reactive({
  num: null,
  people: '',
  pageNum: 1,
  pageSize: 10,
})
const loading = ref(false)
const dialogFormVisible = ref(false)
const tableData = reactive({
  list: [],
  total: 0,
})
const dialogCheckout = ref(false)
const parseTime = (dates) => {
  const date = new Date(dates)
  const formattedTime = `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
  return formattedTime
}
//获取列表
const geTableList = async () => {
  loading.value = true
  let params = {
    num: Number(searchData.num) || null,
    people: searchData.people,
    create_time: searchData.time == undefined ? '' : parseTime(searchData.time),
    pageNum: searchData.pageNum,
    pageSize: searchData.pageSize,
  }
  let res = await getList(params)
  loading.value = false
  tableData.list = res.data.list
  tableData.total = res.data.total
}
//点击搜索
const search = () => {
  geTableList()
}
//点击删除
const deleteClick = (row) => {
  ElMessageBox.confirm('你确定要删除吗?', '提示!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deleteItem(row.id)
    geTableList()
    ElMessage({
      type: 'success',
      message: '删除成功 !',
    })
  })
}
const historyLis = ref([])
const totalPrice = ref('')
const handlDetail = async (row) => {
  totalPrice.value = row.totalPrice
  let params = {
    orderId: Number(row.orderId),
  }
  let res = await orderOver(params)
  historyLis.value = res.data.list.map((item) => {
    if (item.isNew == 1) {
      item.skuName += '(新加)'
    }
    return item
  })
  dialogCheckout.value = true
}

//点击每页数量
const handleSizeChange = async (size) => {
  searchData.pageSize = size
  geTableList()
}
//点击页码
const handleCurrentChange = async (currentPage) => {
  searchData.pageNum = currentPage
  geTableList()
}
//点击重置
const reset = () => {
  searchData.num = ''
  searchData.people = ''
  searchData.time = undefined
  geTableList()
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  // padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.dialog-footer) {
  text-align: end;
}
</style>
